<template>
	<view>
		<view class="box-list">
			<view class="page-list" v-if="is_kol">
				<view class="tips">专场包含车系如下：</view>
				<view class="list-item" v-for="item in configList" :key="item.hid">
					<view class="left">
						<img  :src="item.cover" alt="">
					</view>
					<view class="middle">
						<view class="name">{{item.name}}</view>
						<view class="price">指导价:{{item.guide_price}}</view>
					</view>
					<view class="right" v-if="item.is_show_ask_price">
						<button class="btn" >询底价</button>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="page" v-if="!is_kol">
					
			<view>
				<view class="top">
					<view class="tips">获取本地最新报价， 包含各项费用明细</view>
				</view>
			
					<view class="select-item">
						
						<view class="scroll-box">
							
							<scroll-view
								scroll-x="true"
								:class="carList.length > 3 ? 'scroll-list' : 'scroll-short'"
								:scroll-into-view="toView"
								:scroll-left="scrollLeft"
								>
								<block v-for="(val,index) in carList" :key="val.hid">
									<view class="car-item" :id="'sv'+val.hid" @click="checkItem(val)">
												<view class="img-title">
													<img :src="val.cover" alt="">
													<view class="title">{{val.name}}</view>
													<!-- <view class="price">{{val.hidden_price}}</view> -->
												</view>
												<view class="check" v-if="val.isSelected == 1">
													<img src="../../static/image/ok.png" alt="">
												</view>
											</view>
									</block>
									
							</scroll-view>
							
							<view class="all-car" @click="showCar" v-if="carList.length >3">
								<view class="all">全部车系</view>
								<img src="../../static/image/箭头.png" alt="">
							</view>
						</view>
						<view class="guding">
							<view class="item-jia" v-for="item in gudingList" :key="item.label">
								<view class="top-name">{{item.label}}</view>
								<view class="x">xxx</view>
							</view>
						</view>
						
						<view class="item">
							<view class="left">购车城市</view>
							
							<view class="middle">
								<picker title="选择城市" mode="multiSelector" range-key="name" :range="regionList" :value="provinceCityIndex" mask-style="background: #000; " @change="regionListChange" @cancel="cancelRegion" @columnchange="regionListColumnchange">
									<view class="picker-box" v-if="isLocation">
										{{ newProvinceCityList[provinceCityIndex[0]] ? newProvinceCityList[provinceCityIndex[0]].name : '请选择购车城市' }}
										{{ newProvinceCityList[provinceCityIndex[0]].citys ? newProvinceCityList[provinceCityIndex[0]].citys[provinceCityIndex[1]].name : '' }}
									</view>
									<view class="picker-box" v-if="!isLocation">
										{{provincename}}
									</view>
								</picker>
							</view>
							<view class="right"><img src="../../static/image/right.png" alt=""></view>
						</view>
						<view class="item" v-if="dea_is_show" @click="showModal">
							<view class="left">经销商</view>
							<view class="middle">{{dealerName}}</view>
							<view class="right"><img src="../../static/image/right.png" alt=""></view>
						</view>
						
						<view class="item" v-if="!isEmpower">
							<view class="left">手机号</view>
							
							<input name="input" class="middle" placeholder="请输入手机号" placeholder-style="color:#BEC0C4" v-model="phone" maxlength="11" type="number"  :clueType="clueType" @input="inputChange" ></input>
							<view class="right" v-if="phone == '' "><button class="btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumbers">获取手机号</button></view>
						</view>
						<view class="item" v-if="!isShow">
							<view class="left">验证码</view>	
							<input class="middle" type="number" v-model="sms_code" placeholder="请输入验证码" placeholder-style="color:#BEC0C4"></input>
							<view class="right">
								<button class="btn" @click="getSMS" v-if="!isSMS">获取验证码</button>
								<button class="btn" @click="getSMS" v-if="isSMS">{{countdown}}s</button>
							</view>
						</view>
					</view>
					
					<view class="btn-box">
						<button class="btn-price" v-if="isEmpower"  open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"> 授权手机号领取报价单</button>
						<button class="btn-price" v-if="!isEmpower" @click="clickForm"> 立即领取报价单</button>
						<view class="tips-text">领取报价单信息即视为同意<view style="color:#3075FE" @click="jumpAgreement">《隐私政策》</view></view>
					</view>
				
			
				
				<uni-popup ref="carpop"  mask-background-color="rgba(0,0,0,.4)" safe-area="true">
					<view class="dea-box">
						<view class="cancel-title">
							<view class="cancel" @click="closeModal">取消</view>
							<view class="title">选择车系</view>
						</view>
						<view class="list-box">
							<view class="list-item" v-for="(item, index) in carList" :key="item.hid" @click="selectCar(item, index)">
								<view class="title">{{item.name}}</view>
								<view class="address">
									
									<view class="distance">指导价：{{item.guide_price}}</view>
							
								</view>
								<uni-icons v-show="item.isSelected == 1" class="icon" type="checkmarkempty" size="20"></uni-icons>
							
							</view>
						</view>
					</view>
				</uni-popup>
				
				<uni-popup ref="popup"  mask-background-color="rgba(0,0,0,.4)" safe-area="true">
					<view class="dea-box">
						<view class="cancel-title">
							<view class="cancel" @click="closeModal">取消</view>
							<view class="title">选择经销商</view>
						</view>
						<view class="list-box">
							<view class="list-item" v-for="item in dealerList" :key="item.hid" @click="selectDealer(item)">
								<view class="title">{{item.name}}</view>
								<view class="address">
									
									<view class="distance" v-if="item.distance != ''">{{item.distance}} | {{item.address}}</view>
									<view class="distance" v-if="item.distance == ''">{{item.address}}</view>
							
								</view>
								<uni-icons v-show="item.isSelected == 1" class="icon" type="checkmarkempty" size="20"></uni-icons>
							
							</view>
						</view>
					</view>
				</uni-popup>
				
				<uni-popup type="center" ref="modalPopup" :mask-click="false">
					<view class="modal">
						<view class="title">温馨提示</view>
						<view class="content">提交成功，我们会尽快与您联系！</view>
						<view class="btn" @click="jumpHome">知道了</view>
					</view>
				</uni-popup>
				
			</view>
			
			
			
			<view class="mask" v-if="networkConnected">
				<view class="net-box">
					<img mode="widthFix" src="../../static/image/qiu.jpg" alt="">
					<view class="text">抱歉，页面加载失败了...</view>
					<view class="btn" @click="reloading">重新加载</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const Api = require('../../utils/api.js');
	const request = require('../../utils/request.js');
	
	import {buryReport} from '../../utils/buryReport.js'
	import {deliverClickCallback} from '../../utils/deliverClickCallback.js'
	export default {
		data() {
			return {
				configList: [],
				is_kol: false,
				mount_log_hid: '',
				carData:{},
				basePrice: {},
				newProvinceCityList: [],
				regionList: [],
				provinceCityIndex: [0, 0],
				phone: '',
				province_id: '',
				city_id: '',
				carId: '',
				dealerId: '',
				dealerName: '请选择意向经销商',
				loc_lng: '',
				loc_lat: '',
				dealerList: [],
				code: '',
				countdown: 60,
				timeClock: null,
				isSMS: false,
				sms_code: '',
				cityName: '',
				provincenName: '',
				carHid: '',
				mount_log_hid: '',
				pages:'', //页面地址，
				pageParams: '', // 页面参数
				log_detail_hid: '',
				page_session_id: '',
				hide: 1,
				conversionTarget: 1,
				clueType: 1,
				text: '',
				isShow: true,
				phone_sign: '',
				isLocation: false,
				isEmpower: true,
				isClick: false,
				submitType: '',
				reqArgs: {},
				special_hid: '',
				carName: '',
				carList: [],
				isShowList: true,
				dea_is_show: null,
				toView: '',
				scrollLeft: '0',
				networkConnected: false,
				gudingList: [
					{label: '落地价', value: '1' },
					{label: '裸车价', value: '2' },
					{label: '必要花费', value: '3' },
					{label: '商业保险', value: '4' }
				],
				provincename: '请选择购车城市',
				appIdNum : '',
		
				
			}
		},

	
		async onLoad(options) {
			
			//更换线索组件id
			const accountInfo =  uni.getEnvInfoSync()
			this.appIdNum = accountInfo.microapp.appId
			
			uni.showLoading({
				title:'加载中...'
			})
			
			console.log('网络监测')
			// 2g或没有网时
			let that = this
			uni.getNetworkType({
				success(res) {
					that.networkConnected = res.networkType == 'none' || res.networkType == '2g'
					if(res.networkType == 'none' ) {
						uni.hideLoading()
					}
				}
			})
						
			console.log(options, '品牌报价单')
			this.reqArgs = options
			this.mount_log_hid = options.mount_log_hid ?  options.mount_log_hid : ''

			this.special_hid = options.special_hid
			this.getBasePrice()
			this.getPageInfo()
			this.phone = uni.getStorageSync('empower_phone')? uni.getStorageSync('empower_phone') : ''
			this.phone_sign = uni.getStorageSync('phone_sign')? uni.getStorageSync('phone_sign') : ''

			if(this.phone != '') {
				this.isEmpower = false
			}
			
			// 广告访问页面数据上报
			deliverClickCallback("page_view", this.reqArgs)
			

			setTimeout(() => {
				console.log(uni.getStorageSync('isNetwork'), '定时器')
				if(uni.getStorageSync('isNetwork')) {
					uni.hideLoading()
					this.networkConnected = true
				}
			}, 6000)
	
		},
		
		
		
		async onShow() {
			console.log('onShow')
			
  
			tt.hideHomeButton()
			
		},
		async onHide() {
			this.hide = 0

		},
	
		
		methods: {
			//配置详情
			getPageInfo() {
				request.http({
					url:Api.page_info,
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						'token':uni.getStorageSync('token')
					},
					type: 'GET',
					data: {
						mount_log_hid: this.mount_log_hid
					}
				}).then(res => {
				
					console.log(res.data, '详情')
					this.configList = res.data.style_list
					this.is_kol = res.data.is_kol
				
					if(this.is_kol) {
						uni.hideLoading()
					} else {
						this.onGetLocationEvent()
					}
				})
			},
		
			// 获取经纬度 
			onGetLocationEvent() {
				let _this = this
					//用户授权经纬度
				return	new Promise((resolve, reject) => {
					tt.getLocation({
					success(res) {
						console.log(res, "经纬度")
						_this.loc_lng = res.longitude;
						_this.loc_lat = res.latitude;
						_this.isLocation = true
						resolve('success')
						 _this.getProvince()
						 _this.provincename = ''
						 // _this.getDealer()
						
					},
					fail(err) {
						
						_this.isLocation = false
						resolve('fail')
						// _this.getDealer()
						_this.getProvince()
						_this.dealerName = '请选择意向经销商'
					},
					});
				})
			},
			getBasePrice(){
				request.http(
				{
					url: Api.car_list,
					type: 'GET',
					header: {
						// // 'content-type': 'application/x-www-form-urlencoded',
						// 'token':uni.getStorageSync('token')
					},
					data: {
						special_hid: this.special_hid,
						mount_log_hid: this.mount_log_hid,
						page: -1,
						page_size: -1
					},
					}).then(result=>{
						
						if(result.data.list.length == 0) {
							this.isShowList =false
						}
						this.carHid = result.data.list[0].hid
						this.carName = result.data.list[0].name
						this.dea_is_show =  result.data.list[0].dea_is_show
						
						result.data.list.map((item, index) => {
							item.isSelected = 0
							if(index == 0) {
								item.isSelected = 1
							}
						})
						this.carList = result.data.list
						uni.hideLoading()
						
					}).catch(err => {
						console.log(err, "测试失败")
					})
			},
			getProvince (){
				request.http(
				{
					url: Api.province_city,
					type: 'GET',
					header: {
						// // 'content-type': 'application/x-www-form-urlencoded',
						// 'token':uni.getStorageSync('token')
					},
					data: {
						loc_lng: this.loc_lng,
						loc_lat: this.loc_lat,
						car_style_hid: this.carHid
					},
					}).then(result=>{
						console.log(result, "省份城市")
						this.newProvinceCityList = result.data.list
						let _privateList = this.newProvinceCityList 
						let _cityList = _privateList[0].citys
						this.regionList = [_privateList, _cityList]
						this.province_id = _privateList[0].hid
						this.city_id = _privateList[0].citys[0].hid
						this.cityname = _privateList[0].citys[0].name
						uni.hideLoading()
						if(this.isLocation) {
							this.getDealer()
							
						}
					})
			},
			regionListChange ({detail}){
				this.provinceCityIndex = [detail.value[0],detail.value[1]]
				this.province_id = this.regionList[0][detail.value[0]].hid
				this.city_id=  this.regionList[1][detail.value[1]].hid
				this.cityname = this.regionList[1][detail.value[1]].name
				this.provincename = ''
				this.getDealer()
				this.isLocation = true
			},
			// 列更新事件
			async regionListColumnchange({ detail: { column, value } }) {
				console.log("3333")
				console.log(this.regionList)
				let citylist = []
				//省份更新
				if(column == 0){
					citylist = this.newProvinceCityList[value].citys
					this.regionList = [this.newProvinceCityList, citylist]
				}
			},
			cancelRegion() {
				console.log("取消")
				let citylist = this.newProvinceCityList[this.provinceCityIndex[0]].citys
				this.regionList = [this.newProvinceCityList, citylist]
			},
			// 获取经销商
			getDealer () {
				
				request.http(
				{
					url: Api.dealer_list,
					type: 'GET',
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						// 'token':uni.getStorageSync('token'),
					},
					data: {
						city_id: this.city_id,
						loc_lng: this.loc_lng,
						loc_lat: this.loc_lat,
						car_style_hid: this.carHid
					},
					}).then(result=>{
						result.data.list.map((item, index) => {
							item.isSelected = 0
							if(index == 0) {
								item.isSelected = 1
							}
						})
						
						this.dealerList = result.data.list
						
						
						if(this.dealerList.length > 0) {
							this.dealerName = result.data.list[0].name
							this.dealerId = result.data.list[0].hid
						} else {
							this.dealerName = "暂无经销商"
							this.dealerId = ''
						}
					})
			},
			//选择车系
			selectCar(val, index) {
				console.log(index, "index")
				this.toView = 'sv'+ val.hid
				this.scrollLeft = index * 200
				console.log(this.scrollLeft, "scrollLeft")
				this.carList.map(item => {
					if(val.hid == item.hid){
						item.isSelected = 1
					} else {
						item.isSelected = 0
					}
				})
				this.carHid = val.hid
				this.carName = val.name
				this.dea_is_show = val.dea_is_show
				if(this.isLocation) {
					if(this.dea_is_show) {
						this.getDealer()
					}
				}
				
				
				this.$refs.carpop.close()
			},
			//选择经销商
			selectDealer(val) {
				this.isLocation = true
				this.dealerList.map(item => {
					if(val.hid == item.hid){
						item.isSelected = 1
					} else {
						item.isSelected = 0
					}
				})
				
				this.dealerId = val.hid
				this.dealerName = val.name
				this.$refs.popup.close()
			
			},
			// 获取手机号
			onGetPhoneNumbers(e) {
			if(e.detail.errNo != 10200) {
				request.http(
				{
					url: Api.decrypt_phone,
					type: 'POST',
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						'token':uni.getStorageSync('token'),
					},
					data: {
						encrypted_data: e.detail.encryptedData,
						iv: e.detail.iv,
					},
					}).then(result=>{
						this.phone = result.data.encode_phone
						this.phone_sign = result.data.phone_sign
						uni.setStorageSync('empower_phone', this.phone)
						uni.setStorageSync('phone_sign', this.phone_sign)

					})
				}	
			},
			onGetPhoneNumber (e) {
				console.log(e, '3')
				this.isShow = true
			
				
				if(e.detail.errNo != 10200) {
					request.http(
					{
						url: Api.decrypt_phone,
						type: 'POST',
						header: {
							// 'content-type': 'application/x-www-form-urlencoded',
							'token':uni.getStorageSync('token'),
						},
						data: {
							encrypted_data: e.detail.encryptedData,
							iv: e.detail.iv,
						},
						}).then(result=>{
							this.phone = result.data.encode_phone
							this.phone_sign = result.data.phone_sign
							uni.setStorageSync('empower_phone', this.phone)
							uni.setStorageSync('phone_sign', this.phone_sign)
							this.formClick(1)
							
						})
				} else {
					console.log('拒绝')
					this.isEmpower = false
				}
				
			},
			
			inputChange (e) {
				console.log(e, '手机号')
				if(this.phone.length == 11){
					this.isShow = false
					this.phone_sign = ''
				} else if(this.phone.length == 0){
					this.isShow = true
					this.phone_sign = ''
				}
				
			},
			showCar() {
				this.$refs.carpop.open('bottom')
			},
			showModal () {
				if(this.dealerList.length != 0) {
					this.$refs.popup.open('bottom')
				}
			},
			closeModal () {
				this.$refs.popup.close()
				this.$refs.carpop.close()
			},
			
			clickForm() {
				this.formClick(1)
			},
			
			
			formClick (val) {
			if(val != 1) {
				console.log('不走')
				return
			}
				
				this.isEmpower = false
		
			if(this.provincename == '请选择购车城市') {
				uni.showToast({
					title:'请选择购车城市',
					icon: "none"
				})
				return
			}
			
			if(this.basePrice.dea_is_show  && this.dealerId == '') {
				uni.showToast({
					title:'请选择意向经销商',
					icon: "none"
				})
				return
			}
			if(this.phone == '') {
				uni.showToast({
					title:'请输入手机号',
					icon: "none"
				})
				return
			}
			
			
			if( !this.isShow && this.sms_code == '') {
				uni.showToast({
					title:'请输入验证码',
					icon: "none"
				})
				return
			}
			let obj = {
				adid: this.reqArgs.adid,
				creativeid: this.reqArgs.creativeid,
				creativetype: this.reqArgs.creativetype,
				clickid: this.reqArgs.clickid,
			}
			console.log(this.carHid, "车系id")
			
			// this.isDots = true
			request.http(
			{
				url: Api.leave_clue,
				type: 'POST',
				header: {
					// 'content-type': 'application/x-www-form-urlencoded',
					'token':uni.getStorageSync('token'),
				},
				data: {
					cate: 7,
					province_id: this.province_id,
					city_id: this.city_id,
					style_hid: this.carHid,
					dea_hid: this.dealerId,
					phone: this.phone_sign == '' ? this.phone : '' ,
					sms_code: this.sms_code,
					mount_log_hid: this.mount_log_hid ? this.mount_log_hid : '' ,
					phone_cate: this.isShow ? 1 : 2,
					phone_sign: this.phone_sign,
					dy_ad: obj
				},
				}).then(result=>{
					if(result.data.is_send_sms) {
						console.log('成功')
						deliverClickCallback("form" , this.reqArgs)
					}
					// this.$refs.modalPopup.open('center')
					uni.navigateTo({
						url:`/subPackage/successPage/quotation?city_id=${this.city_id}&style_hid=${this.carHid}&city_name=${this.cityname}&special_hid=${result.data.special_hid}&douyin_name=${result.data.nickname}&douyin_num=${result.data.account_num}&phone=${result.data.phone}&is_send_sms=${result.data.is_send_sms}&kol_id=${result.data.kol_id}`
					})
					this.isEmpower = false
					this.sms_code =''
					// this.isDots = false
				}).catch(err => {
					// this.isDots = false
					console.log(err, "333")
				})
			},
			
			
			jumpHome () {
				this.$refs.modalPopup.close()
		
			},
			getSMS(){
				if(this.phone == '') {
					uni.showToast({
						title:'请输入手机号',
						icon: "none"
					})
					return
				}
				
				request.http(
				{
					url: Api.getCode,
					type: 'POST',
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						//  'token':uni.getStorageSync('token'),
					},
					data: {
						cate: 7,
						phone: this.phone
						},
					}).then(result=>{
						this.setTime()
						this.isSMS = true
					})
			},
			setTime(val) {
			   let that=this;
			   
				if(this.countdown==0){
				this.countdown=60;
				clearTimeout(that.timeClock)
				this.isSMS = false
				}else{
				this.countdown--;
				this.timeClock=setTimeout(()=>{
				that.setTime();   
				},1000)
			   }
			},
			jumpAgreement() {
				console.log(444)
				uni.navigateTo({
					url:'/subPackage/personal/agreement'
				}) 
			},
			
			checkItem(val) {
				
				
				this.carList.map(item => {
					if(val.hid == item.hid){
						item.isSelected = 1
					} else {
						item.isSelected = 0
					}
				})
				this.carHid = val.hid
				this.carName = val.name
				this.dea_is_show = val.dea_is_show
				if(this.isLocation) {
					if(this.dea_is_show) {
						this.getDealer()
					}
				}
				
				
			},
			reloading() {
				this.networkConnected = false
				
				uni.showLoading({
					title: '加载中...',
					duration: 3000,
					success:() =>{
					 
						const currentPages = getCurrentPages();
						console.log(currentPages, 'currentPages')
						uni.redirectTo({
							url: currentPages[currentPages.length - 1]['$page']['fullPath'],
						});		
					console.log(currentPages[currentPages.length - 1]['$page']['fullPath'], '路径2')
					}
					
				})
			
			}
			 
		}
	}
</script>

<style lang="scss" scoped>
	.box-list {
		background: #F5F9FC; 
		.method-box {
			padding: 0 21rpx;
			box-sizing: border-box;
			margin-top: 21rpx;
			.mount-method {
				border-radius: 7rpx;
				height: 109rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #fff;
				font-size: 31rpx;
				margin-bottom: 21rpx;
				box-sizing: border-box;
				padding: 0 21rpx;
				box-sizing: border-box;
				.picker-view {
					color: #6E7175;
					font-size: 27rpx;
					display: flex;
					align-items: center;
				}
				.right {
					display: flex;
					align-items: center;
					.text{
						font-size: 27rpx;
						font-weight: 400;
						color: #6E7175;
					}
				}
			}
		}
		
		
		.page-list {
			height: 100vh;
			font-size: 31rpx;
			margin-top: 20rpx;
			padding: 0 21rpx;
			box-sizing: border-box;
			.tips {
				font-size: 25rpx;
				font-weight: 400;
				color: #6E7175;
				padding-bottom:28rpx;
			}
			.list-item {
				width:100%;
				height: 178rpx;
				background: #FFFFFF;
				border-radius: 7rpx;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				padding: 0 15rpx;
				box-sizing: border-box;
				.left {
					height: 100%;
					display: flex;
					align-items: center;
					img {
						width: 199rpx;
						height: 134rpx;
						
					}
				}
				.middle {
					height: 100%;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content:center;
					.name {
						font-size: 31rpx;
						font-weight: 500;
						color: #222526;
						margin-bottom: 18rpx;
					}
					.price {
						font-size: 22rpx;
						font-weight: 400;
						color: #6E7175;
					}
				}
				
				.right {
						.btn{
							width: 137rpx;
							height: 58rpx;
							background: #3075FE;
							border-radius: 4rpx;
							font-size: 22rpx;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 58rpx;
						}
					}
			}
		}
	}
	.page{
		width: 100%;
		height: 100vh;
		background: #fff;
		.top{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 14rpx 29rpx 0;
			box-sizing: border-box;
			.tips {
				font-weight: 300;
				font-size: 28rpx;
				color: #222526;
			}
		}
		
		.select-item {
			width: 100%;
			padding: 0 29rpx;
			box-sizing: border-box;
			margin-top: -35rpx;
			
			.scroll-box {
				width: 100%;
				height: 207rpx;
				display: flex;
				margin-top: 48rpx;
				
				
				
				.scroll-list, .scroll-short {
					background: #F6F7FC;
					width: 91.5%;
					white-space: nowrap;
					.car-item {
						
						display: inline-block;
						width: 180rpx;
						height: 180rpx;
						position: relative;
						margin: 8rpx 0rpx 8rpx 8rpx;
						 background: #fff;
						.check {
							width: 43rpx;
							height: 43rpx;
							position: absolute;
							top: 21rpx;
							right: 16rpx;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.img-title {
							width: 100%;
							height: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							background: #fff;
							border-radius: 7rpx;
							img{
								width: 180rpx;
								height: 121rpx;
							}
							.title {
								width: 175rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #222526;
								overflow:hidden;
								text-overflow:ellipsis;
								white-space:nowrap;
								text-align: center;
								margin-top: -10rpx;
								margin-bottom: 5rpx;
							}
							.price {
								font-size: 22rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #6E7175;
							}
						}					
					}
				}
				
				.scroll-short {
					background: #F6F7FC;
					width: 100%;
					white-space: nowrap;
				}
			
				.all-car {									
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 58rpx;
					height: 227rpx;
					background: #F6F7FC;
					img {
						width: 18rpx;
						height: 18rpx;
					}
					.all {
						height: 108rpx;
						font-size: 22rpx;
						font-weight: 500;
						color: #222526;
						writing-mode: tb-rl;
						text-align: center;
						 letter-spacing: 5rpx;
					}
				}
			}
			
			
			.guding {
				width: 100%;
				height: 110rpx;
				display: flex;
				background: #F6F7FC;
				border-radius:0rpx 0rpx 8rpx 8rpx;
				.item-jia:last-child {
					border-right: none;
				}
				.item-jia {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 11rpx 0 22rpx 0;
					box-sizing: border-box;
					justify-content: space-between;
					border-right: 1rpx solid #E6E8F2;
					.top-name {
						font-weight: 400;
						font-size: 28rpx;
						color: #6E7175;
					}
					.x {
						font-weight: 500;
						font-size: 32rpx;
						color: #FF3322;
					}
				}
			}
			
			
			
			
			
			
			.item {
				display: flex;
				width: 100%;
				height: 94rpx;
				align-items: center;
				border-bottom: 1rpx solid #DCDDE0;
		
				
				.left, .middle {
					
					font-weight: 400;
					color: #222526;
					font-size: 32rpx;
				}
				.left {
					width: 116rpx;
					color:#6E7175;
					font-size: 28rpx;
				}
				.middle {
					flex:1 ;
					margin-left: 47rpx;
					overflow: hidden;
					text-overflow:ellipsis;    
					white-space: nowrap;
				}
				.right{ 
					img {
						width: 43rpx;
						height: 43rpx;
						margin-top: 25rpx;
					}
					.btn {
						font-weight: 400;
						color: #3075FE;
						font-size: 32rpx;
						background: none;
					
					}
					button::after{ border: none; }
				}
			}
		}
		.btn-box {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			// margin-top: 41rpx;
			position: fixed;
			bottom: 50rpx;
			left: 0;
			.btn-price {
				width: 692rpx;
				height: 87rpx;
				background: #3075FE;
				border-radius: 4rpx;
				font-weight: 400;
				color: #FFFFFF;
				font-size: 29rpx;
				line-height: 80rpx;
				margin-bottom: 21rpx;
				line-height: 87rpx;
			}
			.tips-text {
				font-weight: 400;
				color: #6E7175;
				font-size: 22rpx;
				display: flex;
			}
		}
		
		.dea-box {
			width: 100%;
			height: 942rpx;
			overflow-y: auto;
			background: #FFFFFF;
			padding:0 29rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.cancel-title {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 29rpx 0;
				box-sizing: border-box;
				border-bottom: 1rpx solid #DCDDE0;
		
				.cancel {
					font-weight: 400;
					color: #222526;
					font-size: 29rpx;
				}
				.title {
					flex: 1;
					text-align: center;
					font-weight: 500;
					color: #222526;
					font-size: 33rpx;
				}
			}
			.list-box {
				width: 100%;
				overflow-y: auto;
				.list-item {
					width: 100%;
					padding-top: 20rpx;
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					
					position: relative;
					
					.icon {
						position:absolute;
						top:40%;
						right: 20rpx;
						transform: translate(0, -40%);
					}
					.title {
						font-weight: 500;
						color: #222526;
						font-size: 29rpx;
						margin-bottom: 15rpx;
					}
					.address {
						display: flex;
						font-weight: 400;
						font-size: 22rpx;
						color: #6E7175;
						border-bottom: 2rpx solid #DCDDE0;
						padding-bottom:23rpx ;
						padding-right:100rpx;
						.gang {
							margin: 0 10rpx;
						}
						
					}
				}
			}
			
		}
		
		
		.modal {
			width: 551rpx;
			background: #fff;
			border-radius: 7rpx;
			padding: 28rpx 0 53rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			.title {
				font-weight: 500;
				color: #021615;
				font-size: 33rpx;
				margin-bottom: 28rpx;
			}
			.content{
				font-weight: 400;
				color: #021615;
				font-size: 29rpx;
				margin-bottom: 57rpx;
			}
			.btn {
				width: 196rpx;
				height: 72rpx;
				background: #3075FE;
				border-radius: 4rpx;
				font-weight: 400;
				color: #FFFFFF;
				font-size: 27rpx;
				line-height: 72rpx;
				text-align: center;
			}
		}
		
		.mask {
			width: 100%;
			height: 100vh;
			background: rgba(0,0,0,0.4);
			position: fixed;
			top: 0;
			left: 0;
			.net-box {
				width: 543rpx;
				height: 598rpx;
				background: #FFFFFF;
				border-radius: 7rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				img {
					width: 299rpx;
				}
				.text {
					font-size: 29rpx;
					font-weight: 400;
					color: #021615;
					margin-bottom: 57rpx;
				}
				.btn {
					width: 217rpx;
					height: 72rpx;
					background: #3075FE;
					border-radius: 4rpx;
					font-size: 27rpx;
					line-height: 72rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
		
	}
	
</style>


<style>	
	button::after {
	      border: none;
	}
</style>
